<script setup lang="ts">
import { ref } from "vue";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import { useList } from "@/hooks/page";
import {
  header_api,
  index_api,
} from "@/package/other/api/guider_realize_value";
import { Router } from "@/utils/router";

import PageSticky from "@/components/page/sticky.vue";
import IndexMenuTitle from "@/pages/index/components/index-menu-title.vue";
import IndexNewsItem from "./components/index-news-item.vue";
import ListMore from "@/components/list/more.vue";

onLoad(() => {
  header_api().then((resp) => (typeList.value = resp.icon));
  reloadList();
});
onReachBottom(() => loadMoreList());

const typeList = ref<any[]>([]);
const typeClick = (index: number) => {
  const type = typeList.value[index];
  Router.navigateTo(
    `/package/other/pages/news/list?id=${type.id}&name=${type.name}`
  );
};

const { listData, listStatus, listLoadMore, reloadList, loadMoreList } =
  useList({ page: 1, page_size: 10 }, (query) => {
    return index_api(query);
  });

const newsClick = (index: number) => {
  const news = listData.value[index] as any;
  if (news.type === 2) {
    const query = Router.dataToQuery({
      src: news.video_url,
      poster: news.pic_url,
      title: news.title,
    });
    Router.navigateTo(`/package/other/pages/news/video?${query}`);
  } else {
    Router.navigateTo(
      `/package/other/pages/news/detail?id=${news.id}&title=${news.title}`
    );
  }
};
</script>

<template>
  <view class="index-type">
    <view
      class="index-type-item"
      v-for="(i, d) of typeList"
      :key="i.id"
      @click="typeClick(d)"
    >
      <image class="index-type-icon" :src="i.icon" />
      <view class="index-type-name">{{ i.name }}</view>
    </view>
  </view>

  <PageSticky background="#f9f9f9">
    <view class="index-title">
      <IndexMenuTitle title="热点资讯" />
    </view>
  </PageSticky>

  <view class="index-data">
    <view class="index-data-wrapper">
      <view
        class="index-data-item"
        v-for="(i, d) of listData"
        :key="i.id"
        @click="newsClick(d)"
      >
        <IndexNewsItem :info="i" />
      </view>
    </view>

    <ListMore v-if="listLoadMore" :status="listStatus" />
  </view>
</template>

<style lang="scss">
page {
  padding-top: 30rpx;
}

.index-type {
  display: flex;
  align-items: center;
  padding: 20rpx 16rpx;
  margin: 0 30rpx 20rpx;
  border-radius: 20rpx;
  background-color: #ffffff;

  .index-type-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    min-width: 0;
  }

  .index-type-icon {
    width: 80rpx;
    height: 80rpx;
    margin-bottom: 4rpx;
  }

  .index-type-name {
    font-size: 24rpx;
    color: #2d2d2d;
    line-height: 34rpx;
  }
}

.index-title {
  padding: 20rpx 30rpx;
}

.index-data {
  .index-data-item {
    margin: 0 30rpx 20rpx;
  }
}
</style>